Spread.Viewsでは、スパークラインを使用して、データの傾向を小さなグラフで表現できます。スパークラインでは、右端のデータポイントに最新の値を表示し、この最新値を過去の値と比較します。

次の表は、各スパークラインの作成に使用する数式を示します。

円スパークライン、折れ線スパークライン、縦棒スパークライン、勝敗スパークラインといったさまざまなスパークラインを追加するには、次の手順を実行します。次の図は、さまざまな売上動向データを示します。

サンプルコード

1. DataView参照の後に、次の参照を追加します。

      <script src="./gc.spread.views.sparkline.10.40.20162.0.min.js">

2. グリッドの作成中に描画される、さまざまなスパークライン変数を定義します。

     function renderWinlosssparkline(data, container) {
           var newData = [];
           newData.push(data.may - standard);
           newData.push(data.june - standard);
           newData.push(data.july - standard);
           newData.push(data.aug - standard);
           newData.push(data.sept - standard);
           newData.push(data.oct - standard);
           var winlossSparkline = new GC.Spread.Views.Plugins.Sparkline.WinlossSparkline({
               values: newData,
               setting: {
                   axisColor: '#0C0A3E',
                   markersColor: '#FED766',
                   negativeColor: '#FED766',
                   seriesColor: '#995D81',
                   displayXAxis: true,
                   showFirst: true,
                   showHigh: true,
                   showLast: true,
                   showLow: true,
                   showNegative: true,
                   showMarkers: true
               }
           });
           winlossSparkline.paint(container);
       }
   
       var lineSparklineSetting = {
           highMarkerColor: '#995D81',
           lowMarkerColor: '#FED766',
           markersColor: 'black',
           seriesColor: '#009FB7',
           showMarkers: true,
           showHigh: true,
           showLow: true,
           lineWeight: 2,
           minAxisType: 2,
           maxAxisType: 2,
           manualMax: 25000,
           manualMin: 0
       };
       var columnSparklineSettings = {
           highMarkerColor: '#995D81',
           lowMarkerColor: '#FED766',
           markersColor: 'black',
           seriesColor: '#009FB7',
           showMarkers: true,
           showHigh: true,
           showLow: true,
           minAxisType: 2,
           maxAxisType: 2,
           manualMax: 25000,
           manualMin: 0
       };
       var lineSparklineFormula = '=LINESPARKLINE("may,june,july,aug,sept,oct", "", "' + JSON.stringify(lineSparklineSetting).replace(/\"/g, '') + '")';
       var columnSparklineFormula = '=COLUMNSPARKLINE("may,june,july,aug,sept,oct", "", "' + JSON.stringify(columnSparklineSettings).replace(/\"/g, '') + '")';
       var smallDevice = screen.width <= 480;
       var colWidthSmall = smallDevice ? 125 : '*';
       var colWidthLarge = smallDevice ? 125 : '2*';

3. 列の定義を追加します。

   var columns = [{
               id: 'salesPerson',
               caption: 'Sales Person',
               dataField: 'Salesperson',
               width: colWidthSmall
           }, {
               id: 'may',
               caption: 'May',
               dataField: 'May',
               dataType: 'number',
               format: '$#,##'
           }, {
               id: 'june',
               caption: 'June',
               dataField: 'June',
               dataType: 'number',
               format: '$#,##'
           }, {
               id: 'july',
               caption: 'July',
               dataField: 'July',
               dataType: 'number',
               format: '$#,##'
           }, {
               id: 'aug',
               caption: 'Aug.',
               dataField: 'Aug',
               dataType: 'number',
               format: '$#,##'
           }, {
               id: 'sept',
               caption: 'Sept.',
               dataField: 'Sept',
               dataType: 'number',
               format: '$#,##'
           }, {
               id: 'oct',
               caption: 'Oct.',
               dataField: 'Oct',
               dataType: 'number',
               format: '$#,##'
           }, {
               id: 'trend',
               caption: 'LineSparkline',
               width: colWidthLarge,
               dataField: lineSparklineFormula
           }, {
               id: 'sales',
               caption: 'ColumnSparkline',
               width: colWidthLarge,
               dataField: columnSparklineFormula,
               visible: !smallDevice
           }, {
               id: 'winloss',
               caption: 'WinlossSparkline',
               width: colWidthLarge,
               asyncRender: renderWinlosssparkline,
               visible: !smallDevice
       }, ];

4. DIVタグのグリッドIDを呼び出し、コードを初期化します。

    dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns,
               new GC.Spread.Views.Plugins.GridLayout({
                   rowHeight: 32
           }));

参照

rowHeight